const gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin'),
    cleanCss = require('gulp-clean-css'),
    sass = require('gulp-sass'),
    uglify = require('gulp-uglify'),
    connect = require('gulp-connect'),
    babel = require('gulp-babel');
// ---------------html----------------
gulp.task('html', () => {
    gulp.src('src/**/*.html')
        .pipe(htmlmin({
            removeComments: true,//清除HTML注释
            collapseWhitespace: true,//压缩HTML
            collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
            removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
            minifyJS: true,//压缩页面JS
            minifyCSS: true//压缩页面CSS 
        })
        )
        .pipe(gulp.dest("dist"))
        .pipe(connect.reload())
})
// -----------------css---------------------
gulp.task('css', () => {
    gulp.src('src/css/**/*.scss')
        .pipe(sass())
        // .pipe(cleanCss())
        .pipe(gulp.dest('dist/css'))
        .pipe(connect.reload())
})

// -------------------js--------------------
gulp.task('js', () => {
    gulp.src('src/js/**/*.js')
      .pipe(babel({
        presets: ['@babel/env']
      }))
    //   .pipe(uglify())
      .pipe(gulp.dest('dist/js'))
      .pipe(connect.reload())
  })

//   -------------------img-----------------------
gulp.task('img', () => {
    gulp.src('src/images/*')
        .pipe(gulp.dest('dist/images'))
})

//  ------------------lib-------------------------
gulp.task('lib', () => {
    gulp.src('src/libs/**/*')
        .pipe(gulp.dest('dist/libs'))
})

// ------------------server-------------------
gulp.task('server', () => {
    connect.server({
        root: 'dist',
        port: 2333,
        livereload: true
    });
})

// ---------------watch----------------------
gulp.task('watch', () => {
    gulp.watch('src/**/*.html', ['html'])
    gulp.watch('src/js/**/*.js', ['js'])
    gulp.watch('src/css/**/*.scss', ['css'])
})

gulp.task('default', ['html', 'js', 'css','lib', 'server', 'watch', 'img'])